<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发布</title>
	<div th:include="wechat/include/exportStatic :: static()"></div>
    <link rel="stylesheet" href="/css/publish.css">
    <style type="text/css">
    	#preImg{ width:100%; height: 100%; display: none; border: 1px solid #ddd;}
    </style>
</head>
<body>
    <div class="publish">
        <header>
            <div class="back">
                <a class="back-btn" href="javascript:back();">返回</a>
                <a class="close-btn" href="javascript:close();">关闭</a>
            </div>
            <h1 th:text="${postType.typeName}"></h1>
        </header>
        <form action="/wechat/publish" method="post" id="form1" enctype="multipart/form-data">
	        <main>
	        	<input type="hidden" name="postType" th:attr="value=${postType.id}" />
	            <div class="upload">
	                <a class="upload-btn" href="javascript:;">
	                    <input type="file" name="img" id="fileImg" >
	                    <img alt="" src="" id="preImg">
	                    <div class="cno">
		                    <h4>+</h4>
		                    <label for="">添加图片</label>
	                    </div>
	                </a>
	            </div>
	            <div class="desc">
	                <p>描述<span>内容的第一句话会成为分享标题</span></p>
	                <input type="hidden" id="title" name="postTitle">
	                <textarea name="postContent" id="content" cols="30" rows="10" length="200"></textarea>
	            </div>
	            <div class="phone">
	                <p>电话</p>
	                <div class="phoneno">
	                    <input type="tel" name="postPhone" id="phone" placeholder="只能输入数字" maxlength="11" />
	                </div>
	                <!-- <div class="code">
	                    <input type="number" placeholder="只能输入数字" />
	                    <input type="button" value="获取验证码" />
	                </div> -->
	            </div>
	        </main>
	        <footer>
	            <input class="cancel-btn" type="button" value="取消" onclick="back()"/>
	            <input class="publish-btn" type="button" value="发布" />
	        </footer>
	      </form>
    </div>

    <script>
        // 适配
        var scale = 1 / window.devicePixelRatio
        document
            .querySelector('meta[name="viewport"]')
            .setAttribute('content', 'width=device-width,initial-scale=' + scale + ', user-scalable=no');

        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
        
        $(function(){
        	$(".publish-btn").click(function(){
        		var content = $("#content").val();
        		var title = content.split("。")[0];
        		$("#title").val(title);
        		var phone = $.trim($("#phone").val());
        		if($("#fileImg").val() == ''){
            		if($.trim(content) == ''){
            			dlgAlert("请选择图片！");
            			return false;
            		}	
        		}
        		if($.trim(content) == ''){
        			dlgAlert("请输入内容！");
        			return false;
        		}
        		var myreg=/^[1][3,4,5,6,7,8][0-9]{9}$/;  
              	if(phone == ''){
              		dlgAlert("请填写手机号！");
       				return false;  
              	}
                if (!myreg.test(phone)) {
                	dlgAlert("请填写正确的手机号！");
                	return false;
                }
                showLoading("正在提交");
        		$("#form1").ajaxSubmit({
        			success:function(result){
        				closeLoading();
        				if(result== "success"){
                			dlgAlert("发布成功！", function(){
                				history.go(-1);
                			});
        				} else {
        					dlgAlert("发布失败，请稍后重试！");
        				}
        			}
        		});
        	});
	        $("#fileImg").change(function(){
        		$(".cno").hide();
        		$("#preImg").css("display","block");
        		///// 图片回显
        		$("#preImg").attr("src", getObjectURL(this.files[0]))
        	})
        })
		//建立一個可存取到該file的url
		function getObjectURL(file) {
			var url = null;
			if (window.createObjectURL != undefined) { // basic
				url = window.createObjectURL(file);
			} else if (window.URL != undefined) { // mozilla(firefox)
				url = window.URL.createObjectURL(file);
			} else if (window.webkitURL != undefined) { // webkit or chrome
				url = window.webkitURL.createObjectURL(file);
			}
			return url;
		}
	</script>
</body>
</html>